<template>
  <el-form label-width="80px" size="mini">
    <el-form-item label="开关数据">
      <data-source-btn/>
    </el-form-item>
    <el-form-item label="样式类型">
      <el-select v-model="item.styleType">
        <el-option value="switch" label="开关icon"></el-option>
        <el-option value="img" label="图片"></el-option>
      </el-select>
    </el-form-item>
    <!--  开关icon  -->
    <template v-if="item.styleType==='switch'">
      <el-form-item label="ON状态">
        <el-color-picker v-model="item.activeColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="OFF状态">
        <el-color-picker v-model="item.inactiveColor"></el-color-picker>
      </el-form-item>
    </template>

    <!--  图片  -->
    <template v-if="item.styleType==='img'">
      <el-form-item label="ON状态">
        <uploader v-model="item.activeImg"></uploader>
      </el-form-item>
      <el-form-item label="OFF状态">
        <uploader v-model="item.inactiveImg"></uploader>
      </el-form-item>
    </template>


  </el-form>
</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import Uploader from '../../designer/components/uploader';

  export default {
    name: 'vpd-switch-style',
    components: {
      DataSourceBtn,
      Uploader
    },
    props: {
      item: {
        type: Object
      }
    }
  }
</script>
